<template>
    <div>
        <van-overlay :show="show" @click="closeGuide">
            <img src="../../assets/img/guide.png" alt="" class="guide-img" />
            <div class="image-container">
                <img
                    src="../../assets/img/guideline.png"
                    alt=""
                    class="guide-line-img"
                />
            </div>
            <div class="wrapper">
                <div class="promote-text">麦克风/摄像头权限申请失败.</div>
                <div class="promote-text">请点击本小程序右上角...图标</div>
                <div class="promote-text">然后选择 “重新进入小程序”后再试~</div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Vue from "vue";
import { Overlay } from "vant";

Vue.use(Overlay);
export default {
    data() {
        return {
            show: true,
        };
    },
    methods: {
        closeGuide() {
            this.$emit("closeGuide");
        },
    },
};
</script>

<style scoped>
/deep/ .van-overlay {
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.5);
}
.guide-img {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 135px;
    height: 57px;
}
.image-container {
    /* width: 100%; */
    height: 170px; /* 你想要显示的图片高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative; /* 相对定位 */
    margin-top: 90px;
    margin-right: 80px;
}
.guide-line-img {
    width: 160px;
    height: 249px;
    object-fit: cover; /* 保持图片的宽高比 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 从容器顶部开始 */
    right: 5px;
}
.wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    flex-direction: column;
    margin-top: 5px;
}

.promote-text {
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
}
</style>
